import {CnMediumP} from '@/components/text'
import {CSSProperties, defineComponent, nextTick, onMounted, PropType, watch} from 'vue'

const PhoneProcessItem = defineComponent({
  props: {
    style: Object as PropType<CSSProperties>,
    hightLight: Boolean,
    progress: {
      type: Object as PropType<MyPm.PmProgress>,
      required: true
    },
    step: {
      type: Number,
      required: true
    }
  },
  setup(props, ctx) {
    return () => (
      <div
        id={'phone-progress-' + props.progress.pmProgressId}
        class='relative inline-flex items-center h-32'
        style={props.style}
      >
        <div
          class='w-0 h-0 transform origin-center rotate-45'
          style={{
            border: '12px solid transparent',
            borderTopColor: 'white',
            borderRightColor: 'white'
          }}
        ></div>
        <CnMediumP
          class='flex-1 h-full pl-24 -mr-12 -ml-12 flex items-center flex-nowrap'
          style={{
            background: props.hightLight ? '#ecf5ff' : '#f0f0f0',
            color: props.hightLight ? '#409EFF' : '',
            boxShadow: '0 4px 6px -6px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)'
          }}
        >
          {props.step} {props.progress.pmProgressName}
          {props.progress.makeUserName ? '：' + props.progress.makeUserName : ''}
        </CnMediumP>
        <div
          class='w-0 h-0 transform origin-center rotate-45'
          style={{
            border: '12px solid transparent',
            borderTopColor: props.hightLight ? '#ecf5ff' : '#f0f0f0',
            borderRightColor: props.hightLight ? '#ecf5ff' : '#f0f0f0'
          }}
        ></div>
      </div>
    )
  }
})

const PhoneProcess = defineComponent({
  props: {
    pmProgress: {
      type: Array as PropType<MyPm.PmProgress[]>,
      required: true
    }
  },
  setup(props, ctx) {
    watch(
      () => props.pmProgress,
      n => {
        console.log('手机版流程', props.pmProgress)

        if (n && n.length) {
          nextTick(() => {
            // 将目标绩效滑动至窗口左边
            let runningProcess = props.pmProgress.find(item => item.pmProgressCompleteStatus === 1)
            let box = document.getElementById('phone-process-box')
            if (runningProcess) {
              let currentProcessDom = document.getElementById(
                'phone-progress-' + runningProcess.pmProgressId
              )
              box && (box.scrollLeft = currentProcessDom?.offsetLeft || 0)
            } else {
              let currentProcessDom = document.getElementById(
                'phone-progress-' + props.pmProgress[props.pmProgress.length - 1].pmProgressId
              )
              box && (box.scrollLeft = currentProcessDom?.offsetLeft || 0)
            }
          })
        }
      },
      {immediate: true}
    )
    onMounted(() => {})
    return () => (
      <div
        id='phone-process-box'
        class='bg-white overflow-x-auto flex items-center flex-nowrap pb-12 transition-all'
      >
        {props.pmProgress.map((item, index) => (
          <PhoneProcessItem
            style={{
              zIndex: 99 - index,
              marginLeft: index !== 0 ? '-19px' : '0px'
            }}
            step={index+1}
            hightLight={
              item.pmProgressCompleteStatus === 1 ||
              (index === props.pmProgress.length - 1 && item.pmStageCode === '0019'&&item.pmProgressCompleteStatus === 2)
            }
            progress={item}
          ></PhoneProcessItem>
        ))}
      </div>
    )
  }
})

export default PhoneProcess
